@charset "utf-8";

// --------------- navbar-primary ---------------
$navbar-primary: $brand-primary;
$navbar-primary-border: lighten($navbar-primary, 10%);
$navbar-primary-link-color: #e0e0e0;
$navbar-primary-link-hover-color: #fafafa;
$navbar-primary-link-hover-bg: lighten($navbar-primary, 5%);
$navbar-primary-link-active-color: #fafafa;
$navbar-primary-link-active-bg: darken($navbar-primary, 5%);

.navbar {
  margin-bottom: 0;
}

.navbar-default {
  &.navbar-primary {
    font-size: 1.7rem;
    
    background-color: $navbar-primary;
    border-color: $navbar-primary-border;
    
    .navbar-nav {
      width: 100%;
      
      > li {
        width: 13%;
        text-align: center;
        display: inline-block;
        
        > a {
          color: $navbar-primary-link-color;
  
          &:hover,
          &:focus {
            color: $navbar-primary-link-hover-color;
            background-color:$navbar-primary-link-hover-bg;
          }
        }
      }
      
      > .active > a {
        &,
        &:hover,
        &:focus {
          color: $navbar-primary-link-active-color;
          background-color: $navbar-primary-link-active-bg;
        }
      }
      > .disabled > a {
        &,
        &:hover,
        &:focus {
          color: $navbar-inverse-link-disabled-color;
          background-color: $navbar-inverse-link-disabled-bg;
        }
      }

      // Dropdowns
      > .open > a {
        &,
        &:hover,
        &:focus {
          color: $navbar-primary-link-active-color;
          background-color: $navbar-primary-link-active-bg;
        }
      }

      @media (max-width: $grid-float-breakpoint-max) {
        // Dropdowns get custom display
        .open .dropdown-menu {
          > .dropdown-header {
            border-color: $navbar-inverse-border;
          }
          .divider {
            background-color: $navbar-inverse-border;
          }
          > li > a {
            color: $navbar-primary-link-color;
            &:hover,
            &:focus {
              color: $navbar-primary-link-hover-color;
              background-color:$navbar-primary-link-hover-bg;
            }
          }
          > .active > a {
            &,
            &:hover,
            &:focus {
              color: $navbar-primary-link-active-color;
              background-color: $navbar-primary-link-active-bg;
            }
          }
          > .disabled > a {
            &,
            &:hover,
            &:focus {
              color: $navbar-inverse-link-disabled-color;
              background-color: $navbar-inverse-link-disabled-bg;
            }
          }
        }
      }
    }
  }
}